<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画的基本使用</title>
    <style>
      .outer {
        width: 1000px;
        height: 100px;
        border: 1px solid black;
      }
      /* 定义动画（定义一组动画帧） 简单定义*/
      @keyframes wangyoudong {
        /*关键词定义 第一帧*/
        from {
        }
        /* 最后一帧*/
        to {
          transform: translateX(900px);
          background-color: red;
        }
      }
      /* 定义动画 复杂*/
      @keyframes wangyoudong {
        /*关键词定义 第一帧*/
        0% {
        }
        50% {
          background-color: skyblue;
        }
        /* 最后一帧*/
        100% {
          background-color: blue;
          transform: translate(900px) rotate(360deg);
          border-radius: 50%;
        }
      }
      .inner {
        width: 100px;
        height: 100px;
        background-color: skyblue;
        /* 指定动画的名称 */
        animation-name: wangyoudong;
        /*给动画设置 播放时间*/
        animation-duration: 3s;
        /*给动画设置延迟时间 用来解决变颜色时 第一帧卡顿问题*/
        animation-delay: 1s;
      }
    </style>
</head>
<body>
    <div class="outer">
      <div class="inner"></div>
    </div>
</body>
</html>